<template>
  <div class="title-box" :class="{ 'title-border': border }">
    <div class="title">
      <img src="@/assets/images/title-box-dot.png" alt="" class="title-dot" />
      <div class="text">{{ title }}</div>
    </div>
    <div class="conent">
      <slot name="content"></slot>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件
// 引入方法
import { defineProps, defineEmits, watch, onMounted, ref } from 'vue'
const props = defineProps({
  title: {},
  border: {
    default: true,
  },
})
const emits = defineEmits([])
// 自定义状态
onMounted(() => {})
// 自定义方法
</script>
<style lang="less" scoped>
.title-border {
  border-radius: (16 / @vh);
  border: 1px solid rgba(47, 109, 255, 0.6);
}
.title-box {
  padding: (20 / @vh);
  .title {
    display: flex;
    align-items: center;
    width: (470 / @vw);
    height: (36 / @vh);
    background-image: url('@/assets/images/title-box背景.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    .title-dot {
      margin-right: (5 / @vh);
      width: (12 / @vh);
      height: (12 / @vh);
    }
    .text {
      font-size: (16 / @vh);
    }
  }
  .conent {
    padding: (20 / @vh) 0;
  }
}
</style>
